<template>
  <t-table
    row-key="id"
    table-layout="auto"
    :data="list"
    :columns="columns"
    :pagination="page"
    :loading="loading"
    @page-change="({ current }) => onPage(current)"
    hover
  >
    <template #code="{ row }">
      <b>{{ row.order.code }}</b>
    </template>
    <template #name="{ row }">
      {{ row.order.name }}
    </template>
    <template #count="{ row }">
      <t-tag theme="primary" variant="light">{{ row.count }}</t-tag>
    </template>
    <template #time="{ row }">
      {{ row.created_at.date() }}
    </template>
  </t-table>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import { goods } from '@/api/erp/outbound'

  const props = defineProps(['id'])
  const plugin = index.plugin

  const list = ref([])
  const columns = [{
    title: plugin.t('outbound.code'),
    colKey: 'code',
    cell: 'code'
  }, {
    title: plugin.t('outbound.name'),
    colKey: 'name',
    cell: 'name'
  }, {
    title: plugin.t('outbound.goods.count'),
    colKey: 'count',
    cell: 'count',
    align: 'center'
  }, {
    title: plugin.t('outbound.time'),
    colKey: 'time',
    cell: 'time'
  }]
  const page = ref({
    page: 1,
    current: 1,
    pageSize: 0,
    total: 0,
    showPageSize: false,
  })
  const loading = ref(false)

  // 加载
  const getData = () => {
    loading.value = true
    list.value = []
    goods(props.id, page.value).then(res => {
      list.value = res.data.map(item => {
        item.created_at = app.time.load(item.created_at)
        return item
      })
      // 分页
      page.value.current = res.current_page
      page.value.pageSize = res.per_page
      page.value.total = res.total
    }).finally(() => {
      loading.value = false
    })
  }

  // 分页
  const onPage = current => {
    page.value.current = current
    page.value.page = current
    getData()
  }

  onPage(1)
</script>